<template>
    <div class="Chkaijiang">
        <div class="guding">
            <div class="headerone">
                <span class="src"></span>
                <span class="title"> 重庆时时彩</span>
            </div>
            <mt-navbar v-model="selected" class="zhubu">
                <mt-tab-item id="1">
                    <span class="ml"> 近20期</span>
                </mt-tab-item>
                <mt-tab-item id="2">
                    <span class="ml"> 近50期</span>
                </mt-tab-item>
                <mt-tab-item id="3">
                    <span class="ml"> 近100期</span>
                </mt-tab-item>
                <mt-tab-item id="4">
                    <span class="ml"> 近300期</span>
                </mt-tab-item>
            </mt-navbar>
        </div>
        <!-- tab-container -->

        <mt-tab-container v-model="selected" class="fubu">
            <mt-tab-container-item id="1">
                <div class="hebin">
                    <div class="chheibi">
                        <div class="zhongbu ">
                            <span class="zhongtitle zhongone">期号</span>
                            <span class="zhongtitle zhongtwo">开奖号码</span>
                        </div>
                        <div class="zhongbu" v-for="(item,i) in datashou" :key=item.qiushu+item.kaijiang :class="{background:i%2==0}">
                            <span class="zhongtitle zhongone">{{item.qiushu}}</span>
                            <span class="zhongtitle zhongtwo">{{item.kaijiang}}</span>
                        </div>
                    </div>
                    <div id="slider" class="mui-slider">
                        <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                            <div class="mui-scroll" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
                                <div class=" zhongbu ">
                                    <span class="zhongtitle zhongqita " v-for="(item,i) in title " :key=item :class="{width:i==10} "> {{item}}
                                    </span>
                                </div>
                                <div class="zhongbu " v-for="(item,i) in data " :class="{background:i%2==0} ">
                                    <span class="zhongtitle zhongqita " v-for="(item1,i) in item " :class="{width:i==10} ">{{item1}}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </mt-tab-container-item>
            <mt-tab-container-item id="2 ">
        
            </mt-tab-container-item>
            <mt-tab-container-item id="3 ">
             
            </mt-tab-container-item>
            <mt-tab-container-item id="4 ">
            
            </mt-tab-container-item>
        </mt-tab-container>

        <!-- <div>
            <div style="float:left ">555555555555555555555555555555555</div>
            <div id="slider " class="mui-slider " style="float:left ">
                <div id="sliderSegmentedControl " class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted ">
                    <div class="mui-scroll ">
                        <span class="span ">1</span>
                        <span class="span ">1</span>
                        <span class="span ">1</span>
                        <span class="span ">1</span>
                        <span class="span ">1</span>
                        <span class="span ">1</span>
                        <span class="span ">1</span>
                    </div>
                </div>

            </div>
        </div> -->
    </div>
</template>
<script>
import mui from "../../lib/mui/js/mui.min.js";
import { Toast } from "mint-ui";
export default {
    data() {
        return {
            selected: "1",
            title: [
                "万位",
                "千位",
                "百位",
                "十位",
                "个位",
                "前三",
                "中三",
                "后三",
                "龙虎",

                "梭哈",
                "斗牛"
            ], // 所有分类的列表数组
            // 图片列表的数组
            data: [],
            datashou: [],
            page: 1
        };
    },
    mounted() {
        // 当 组件中的DOM结构被渲染好并放到页面中后，会执行这个 钩子函数
        // 如果要操作元素了，最好在 mounted 里面，因为，这里时候的 DOM 元素 是最新的
        // 2. 初始化滑动控件
        mui(".mui-scroll-wrapper").scroll({
            deceleration: 0.0006 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
        });
        this.shuju();
    },
    methods: {
        loadMore() {
            this.loading = true;
            setTimeout(() => {
                ++this.page;
                this.shuju();
                this.loading = false;
            }, 1000);
            Toast("加载更多");
          
        },
        shuju: function() {
            // 192.168.2.15:81
            this.$http
                .get(
                    "http://192.168.2.15:81/api/cqssc/cqssc/lottery_records?page=" +
                        this.page
                )
                .then(result => {
                    result.body.data.forEach((item, i) => {
                        var arry = [
                            item.b1_dxds,
                            item.b2_dxds,
                            item.b3_dxds,
                            item.b4_dxds,
                            item.b5_dxds,
                            item.qs,
                            item.zs,
                            item.hs,
                            item.lh,
                            item.sh,
                            item.dn
                        ];
                        var obj = {
                            qiushu: item.qishu.slice(-3),
                            kaijiang: `${item.ball_1} ${item.ball_2} ${
                                item.ball_3
                            } ${item.ball_4} ${item.ball_5}`
                        };
                        this.datashou.push(obj);
                        this.data.push(arry);
                    });
                });
        }
    }
};
</script>
<style lang="scss" scoped>
span {
    display: inline-block;
}

.Chkaijiang {
    .guding {
        position: fixed;
        width: 100%;
        z-index: 99;
    }

    .fubu {
    }
    .headerone {
        width: 100%;
        background: red;
        height: 1rem;
        text-align: center;
        padding: 0 0.3rem;
        line-height: 1rem;
        .title {
            color: #fff;
            font-size: 0.36rem;
            margin: 0 auto;
        }
        .src {
            background: url("../../img/Game/返回2.png");
            height: 0.37rem;
            width: 0.17rem;
            background-size: 0.17rem 0.37rem;
            float: left;
            position: relative;
            top: 0.3rem;
        }
    }
    .zhubu {
        .mint-tab-item {
            border-bottom: 0.03rem solid #e0e0e0;
        }
        .is-selected {
            border-bottom: 0.03rem solid #d51313;
            color: #d51313;
            margin-bottom: 0px;
        }
        .ml {
            font-size: 0.32rem;
        }
        padding-bottom: 0.3rem;
    }
    .mui-slider {
        height: 100%;
      overflow: visible	; 
        .mui-segmented-control.mui-scroll-wrapper {
            height: 100%;
            .mui-scroll{
                height:100%;
            }
        }
    }

    .hebin {
        display: flex;
        justify-content: flex-start;
        height: 100%;
        .chheibi {
            width: 2.38rem;
        }
    }

    .zhongbu {
        background: #dedede;
        height: 0.64rem;
        display: flex;
        justify-content: flex-start;
        text-align: center;
        .zhongtitle {
            text-align: center;
            height: 100%;
            font-size: 0.22rem;
            line-height: 0.64rem;
        }
        .zhongone {
            width: 0.96rem;
        }
        .zhongtwo {
            width: 1.42rem;
        }
        .zhongqita {
            width: 0.74rem;
        }
        .width {
            width: 2rem;
        }
    }
    .background {
        background: #fff;
    }
    .fubu {
        padding-top: 2.3rem;
    }
}
</style>

